<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col style="margin-top: 20px" :span="3" :offset="3">
          <span style="font-size: 3em">公告</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col style="margin-top: 20px" :span="16" :offset="4">
          <el-collapse v-for="notice in noticeList" v-model="activeName" accordion>
            <el-collapse-item>
              <template slot="title">
                <i class="header-icon el-icon-info"></i>
                {{ notice.noticeTitle }}
              </template>
              <span class="notice_content" v-html="notice.noticeContent"></span>
            </el-collapse-item>
          </el-collapse>
        </el-col>
        <el-col style="margin-top: 20px">
          <el-divider>博物院</el-divider>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import {allNotice} from "@/api/request";

export default {
  data() {
    return {
      activeName: '1',
      noticeList: [],
    };
  },
  methods: {},
  mounted() {
    allNotice().then(
        res => {
          if (res.data.code === 1) {
            this.noticeList = res.data.data
          }
        }
    )
  }
}
</script>

<style scoped>

::v-deep .el-collapse-item__header {
  font-size: 1.2em;
  background-color: #f9f4e9 !important;
}

::v-deep .el-collapse-item__content {
  font-size: 1em !important;
  text-align: left;
  background-color: #f9f4e9 !important;
}
</style>
